<template>
  <div class="app-container">
    <el-tabs v-model="tabIndex" @tab-click="changTab">
      <el-tab-pane label="单品" name="1"></el-tab-pane>
      <el-tab-pane :label="'新品（'+goofTotal+'）'" name="4"></el-tab-pane>
      <el-tab-pane label="套餐" name="2"></el-tab-pane>
      <el-tab-pane label="购物车" name="3">
        <el-table
          v-loading="loading"
          :data="shopCarLIst"
          @selection-change="handleChange"
          row-key="id"
          max-height="500"
        >
          <el-table-column type="selection" width="50"></el-table-column>
          <el-table-column type="index" label="序号" align="center" key="31">
            <template slot-scope="scope">
              <span>{{ (form.pageNum - 1) * form.pageSize + scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="imageUrl" label="图片" align="center" key="32">
            <template slot-scope="scope">
              <div v-if="!scope.row.imageUrl">暂无</div>
              <el-image
                v-else
                style="width: 80px;height: 80px"
                :src="scope.row.imageUrl"
                fit="contain"
                :preview-src-list="[scope.row.imageUrl]"
              >
              </el-image>
            </template>
          </el-table-column>
          <el-table-column prop="title" label="商品/套餐名称" align="center" key="33" width="500"/>
          <el-table-column prop="priceType" label="类型" align="center" key="34">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.ats_price_type" :value="scope.row.priceType"/>
            </template>
          </el-table-column>
          <el-table-column prop="unitPrice" label="单价(元)" align="center" key="35"/>
          <el-table-column prop="quantity" label="数量" align="center" key="36">
            <template slot-scope="scope">
              <el-input type="number" v-model="scope.row.quantity" placeholder="请输入" :min="1"
                        @blur="changeShopCar(scope.row)"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" align="center" key="37"/>
          <el-table-column label="操作" align="center" width="100" key="40">
            <template slot-scope="scope">
              <el-button
                v-hasPermi="['ims:storeOrder:delete']"
                type="text"
                @click="deleteShopCar(scope.row)"
              >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <el-form :model="form" ref="form" :inline="true" v-show="tabIndex!=3">
      <el-form-item label="套餐名称" prop="bomName" v-show="tabIndex==2">
        <el-input v-model="form.bomName" placeholder="请输入" clearable></el-input>
      </el-form-item>
      <el-form-item :label="(tabIndex==1||tabIndex==4)?'商品名称':'主商品名称'" prop="productName">
        <el-input v-model="form.productName" placeholder="请输入" clearable></el-input>
      </el-form-item>
      <el-form-item label="商品类别" prop="productCategoryId">
        <el-select v-model="form.productCategoryId" filterable clearable style="width: 100%">
          <el-option
            v-for="item in typeList"
            :key="item.id"
            :label="item.productCategoryName"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-button v-if="tabIndex!=3" type="primary" v-hasPermi="['ims:storeOrder:add']" plain icon="el-icon-plus"
               @click="addRow()">定制下单
    </el-button>
    <div style="text-align: center;margin: 20px" v-if="tabIndex==3">
      <el-button type="primary" plain icon="el-icon-plus"
                 @click="okShpCar">提交订单
      </el-button>
    </div>
    <el-table
      v-show="tabIndex!=3"
      v-loading="loading"
      :data="list"
    >
      <el-table-column type="index" label="序号" align="center" key="1">
        <template slot-scope="scope">
          <span>{{ (form.pageNum - 1) * form.pageSize + scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="imageUrl" label="图片" align="center" key="2" width="100">
        <template slot-scope="scope">
          <div v-if="!scope.row.imageUrl">暂无</div>
          <el-image
            v-else
            style="width: 80px;height: 80px"
            :src="scope.row.imageUrl"
            fit="contain"
            :preview-src-list="[scope.row.imageUrl]"
          >
          </el-image>
        </template>
      </el-table-column>
      <el-table-column prop="bomName" label="销售套餐" align="center" v-if="tabIndex==2" key="3"/>
      <el-table-column prop="partInfo" label="配件信息" align="center" v-if="tabIndex==2" key="4"/>
      <el-table-column prop="productName" :label="(tabIndex==1||tabIndex==4)?'商品名称':'主商品名称'" align="center"
                       key="5"/>
      <el-table-column prop="productCategoryName" label="商品类别" align="center" key="6"/>
      <el-table-column prop="productType" :label="(tabIndex==1||tabIndex==4)?'商品类型':'主商品类型'" align="center"
                       width="150"
                       key="7">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.product_type" :value="scope.row.productType"/>
        </template>
      </el-table-column>
      <el-table-column prop="skuName" :label="(tabIndex==1||tabIndex==4)?'商品规格':'主商品规格'" align="center"
                       key="8"/>
      <el-table-column prop="unitPrice" label="单价(元)" align="center" key="10" width="100"/>
      <el-table-column prop="customerName" label="归属" align="center" key="11" width="100"/>
      <el-table-column prop="inventoryQuantity" label="库存" align="center" key="12" width="100"/>
      <el-table-column label="操作" align="center" width="100" key="20">
        <template slot-scope="scope">
          <el-button
            v-hasPermi="['ims:storeOrder:shop']"
            type="text"
            @click="addShopCar(scope.row)"
          >加入购物车
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-if="tabIndex!=3"
      :total="total"
      :page.sync="form.pageNum"
      :limit.sync="form.pageSize"
      @pagination="getList"
    />
    <addDialog ref="addDialog" @ok="handleQuery"></addDialog>
    <addDialog2 ref="addDialog2" @ok="handleQuery"></addDialog2>
  </div>
</template>
<script>
import {
  listStoreOrder,
} from "../../../api/imsMng";
import addDialog from "./addDialog";
import addDialog2 from "../orderMng/addDialog.vue";
import {addShopCar, deleteShopCar, lisShopCar, updateShopCar} from "../../../api/saleMng";
import {listGoodTypeSelect} from "../../../api/goodMng";

export default {
  components: {addDialog, addDialog2},
  dicts: ['product_type', 'ats_price_type'],
  data() {
    return {
      loading: false,
      tabIndex: '1',
      form: {
        bomName: "",
        productName: "",
        productCategoryId: "",
        pageNum: 1,
        pageSize: 10
      },
      goofTotal: 0,
      total: 0,
      list: [],
      typeList: [],
      shopCarLIst: [],
      selectLIst: []
    }
  },
  created() {
    this.load()
  },
  methods: {
    load() {
      this.handleQuery()
      listGoodTypeSelect().then(res => {
        this.typeList = res.data
      })
    },
    changTab(e) {
      if (this.tabIndex != 3) {
        this.resetQuery()
      } else {
        this.listShpCar()
      }
    },
    handleQuery() {
      this.form.pageNum = 1
      this.getList()
      this.getTotal()
    },
    resetQuery() {
      this.resetForm('form')
      this.handleQuery()
    },
    getTotal() {
      let req = {
        priceType: 1,
        flag: 1,
      }
      listStoreOrder(req).then(res => {
        this.goofTotal = res.total
      })
    },
    getList() {
      this.loading = true
      if (this.tabIndex == 4) {
        this.form.priceType = 1
        this.form.flag = 1
      } else {
        this.form.priceType = this.tabIndex
        this.form.flag = ''
      }
      listStoreOrder(this.form).then(res => {
        this.list = res.rows
        this.total = res.total
      }).finally(e => {
        this.loading = false
      })
    },
    listShpCar() {
      this.loading = true
      lisShopCar().then(res => {
        this.shopCarLIst = res.rows
      }).finally(e => {
        this.loading = false
      })
    },
    handleChange(e) {
      this.selectList = e
    },
    addRow() {
      this.$refs.addDialog2.show()
    },
    okShpCar() {
      if (this.selectList && this.selectList.length) {
        this.$refs.addDialog.show(this.selectList)
      } else {
        this.$message.error('请先选择一条数据')
      }
    },
    addShopCar(row) {
      let req = {
        productId: row.productId,
        skuId: row.skuId,
        skuName: row.skuName,
        unitPrice: row.unitPrice,
        inventoryId: row.inventoryId
      }
      if (row.priceType == 2) {
        req.salePolicyId = row.salePolicyId
      }
      this.loading = true
      addShopCar(req).then(res => {
        this.listShpCar()
        this.$message.success('加入购物车成功')
      }).finally(e => {
        this.loading = false
      })
    },
    changeShopCar(row) {
      this.loading = true
      updateShopCar(row).then(res => {
        this.$message.success('修改购物车成功')
      }).finally(e => {
        this.loading = false
      })
    },
    deleteShopCar(row) {
      this.$modal.confirm('是否确定删除').then(() => {
        this.loading = true
        deleteShopCar({id: row.id}).then(res => {
          this.listShpCar()
          this.$message.success('删除购物车成功')
        }).finally(e => {
          this.loading = false
        })
      })
    },
  }
}
</script>
